2. GUIとCLIの歴史

資料

参考情報いろいろ

Twitter

個人プロジェクトをScrapbox上に作成

sfc-id2019-CNSログインアカウント

HCIおもちゃ説

また、この研究分野は、一見役立たなさそうなおもちゃのようなものに、理屈をこねくり回して正当化させるのが多いように感じ(もちろんすべての研究がそうというわけではありません)、興ざめしてしまったのも要因の一つです。

これはおもちゃ?

https://vimeo.com/320211661

https://gyazo.com/4bed0a8f8639af792a5e93ade3083a10

計算機インタフェースの歴史

生物進化の系統樹

http://gyazo.com/a1063ca65e4f24d057832b8d81a6dc96.png

カンブリア爆発

様々な生物「門」が一気に発生

http://gyazo.com/2098757f3e17f02a03a9a20383cf3eb1.png

カンブリア爆発

http://gyazo.com/ed28680d22f568488dd85ee8f3dec405.png

計算機の制御パネル?

http://gyazo.com/cd47753dddd9659436b8a27c14328fe3.png

飛行機のコックピット

http://gyazo.com/58eadfb59b0e235916897080ff92946d.png

昔話: 8008で作った計算機

1976ごろ

http://Gyazo.com/078e8c514fec7baf6388b3bc6246423c.png

8008マイコン

http://Gyazo.com/08817cf560e0b559b67dd0f7e121ec3f.png

紙テープリーダ

http://Gyazo.com/3e8612d7427e1e95b93d87c0c71ae5f1.png

キーボードを利用

文字の入出力で計算機を利用

CLIシステムの伝統

大型計算機のTSS

Time Sharing System

大型計算機を共有

ミニコン

Unixの「シェル」

Apple IIのBASIC

DOSの「コマンドプロンプト」

DECのミニコン

Digital Equipment Corporation

PDP11, VAX11など

VMSというOS

VAX11

1976 @ DEC

http://gyazo.com/d49ece19780d3f294aed99e98217bcd7.png

「MIPS」の標準

ちなみにIntel Core i7は15万MIPS

Apple II

1977 @ Apple

ビットマップ表示可能なパソコン

http://gyazo.com/19acdfe09dfaf34b2015ec4c926936e8.png

Unixのシェル

MacのTerminal.appなど

デモ: Unixターミナル

CLIの基本操作

code:cli

while true do

プロンプトを表示してユーザ入力待ち

e.g. C>

ユーザがコマンドを入力して改行キーを押す

コマンド文字列を計算機が解釈して実行

end

例: Unixのdateコマンド

計算機が文字端末に"% "を送って表示

ユーザがキーボードから"date"と入力

"date"という文字列が計算機に送られる

送られた文字列を計算機が解釈

時刻を調べ、結果文字列を文字端末に送る

送られた文字列を文字端末が表示する

Unixの貢献

C言語

全二重通信

機械の反応を待たない

正規表現の普及

リダイレクション

オブジェクト指向風入出力

ユーザとデバイスの差が無い

デバイス自体はブラックボックス

シリアル接続文字端末向け入出力デバイス

ダム端末対応

機械タイプライタのような端末

入力された文字を送る

送られてきた文字を表示

CLIのプログラミング

http://gyazo.com/28678b9ca87920163df678bfd3b0d4fc.png

「スクリーンエディタ」

「ラインエディタ」との対比

Emacs, Vi, ...

要するに普通のエディタ

カーソルをどこにでも移動できる

ポインティングデバイスは無い

端末の「エスケープシーケンス」を利用

VT100

http://gyazo.com/ab7ab81befe7f5a4a3a9e2fef1207760.png

CLIの利点

作成が簡単

機械と人間の区別が無い

メールサーバのインタフェース (SMTP)

http://gyazo.com/d6cd209af9431723e06d9f23aeeb670d.png

GUIの歴史

Altoが最初のもの (1973)

Xerox PARC (Palo Alto Research Center)で発明

Xerox PARC

http://gyazo.com/b93fb40af13436b714e1ac3d8f26ba8a.png

N37.4020824,W122.1482261,Z16 Parc

Alto

1973 @ PARC

GUIワークステーションのさきがけ

ビットマップディスプレイ

マウス/ウィンドウ/メニュー

http://gyazo.com/96bf4fda6bf46b0f862f9d3c68905016.png

https://gyazo.com/ffe13676111e106b8c819b870cce4601.png

Altoハードウェア復活??

https://www.youtube.com/watch?v=YupOC_6bfMI

Steve JobsとAlto

https://gyazo.com/d6273198fc881b8b35b1db4b61a1d005

Xerox Star

1981発売

https://gyazo.com/79d6aa012b0c679da9a11b02cb3f659e.png

Ethernet

TCP/IPではない

JStar

1982発売

日本語対応

https://gyazo.com/966466ccdf1c07654c2c9574c8a0b459.png

Sketchpad

Ivan Sutherlandのシステム (1963)

https://www.youtube.com/watch?v=6orsmFndx_o

http://gyazo.com/800f0536f882fe5f769e636048b2eaaa.png

Andrew

https://gyazo.com/ec72bb024135e323c53818d6f5aca8c8

1982 @ CMU

ウィンドウシステム他

MIMEの起源

X Window System

1984 @ MIT

X11は1987年

ウィンドウサーバとマネージャを分離

何故か今でも現役

(増井Window System)

1985 @ シャープ

シャープのワークステーションで動作

イベントはウィンドウ階層の根から伝播

ウィンドウマネージャ記述言語

並列動作ツールキット

Lisa

1983 @ Apple

AppleのGUIパソコン

ジョブズがAltoを見て驚いて作ったもの

http://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png

Macintosh

1984 @ Apple

もともとJef Raskinのプロジェクトだった

ジョブズがRaskinを追い出す

NeXT Computer

1985創業 by ジョブズ

1988 NeXT Cube発売

現在のMacの原型

http://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png

Windows95

1995発売

頑張ってDOSをGUI対応

GUIのメリット

直接操作

連続的

可逆的

具体的

これでは間に合わない

連続性/可逆性

少し操作すると少し反応

逆に操作すると戻る

こうなっていないものがまだ多い

スイッチ

アプリ起動

GUI部品とその進化

メニュー

スクロールバー

スライダ

...

メニューの進化

AltoのSmalltalkのメニュー

http://gyazo.com/b8fda3611776f5377eb47d707af57a6d.png

Lisaのメニュー

http://gyazo.com/3ca39857447ef0c22e3decfbd4e568cb.png

パイメニュー

http://gyazo.com/7402c898b7a61772e9d79ec976bc47c4.png

T-Cube

http://gyazo.com/eedbbd982f2000f08ebb30ac66425e89.png

フリック入力

http://gyazo.com/1691febad27439d3bf44232c54dcb1e8.png

スクロールバーの進化

Smalltalkのスクロールバー

http://gyazo.com/98ad768b8492d0af7799086c78b22923.png

スクロールバーにマウス移動で矢印表示

スクロールの方向や操作を指示

スクロールバーの矢印

http://gyazo.com/fe9c87ee5ec6277d288bb9f721ceff0b.png

Lisaのスクロールバー

改良版スクロールバー

http://Gyazo.com/ddce4448cce61b764bcd460610e1ad61.png

Lisaの画面

http://Gyazo.com/03d3fe5a2f2464b9b2448fb83c556ed3.png

Macintosh System 4.2 (Finder version 6)

http://Gyazo.com/371dadb8dfee860bef2a1ef88d3d5b83.png

NeXTStep

http://Gyazo.com/37a3e1d28c4268112b42e760de38f2af.png

GUIの進化まとめ

メニューやスクロールバーの発明から30年

微妙に機能が異なるものが登場

徐々に使いやすく進化

GUIとオブジェクト指向

GUI部品をオブジェクトにする

ウィンドウ

メニュー

...

GUIツールキット

オブジェクト指向のGUIライブラリ

現在の主流

インタフェースビルダ

GUIオブジェクトを対話的に編集

http://Gyazo.com/26628fafb9d8cddd83ada076705b68fe.png

Cocoa

MacのGUIライブラリ

Xcode: インタフェースビルダとコンパイラ等の統合

XCode

https://gyazo.com/e3d369b962d66cef97be83a8325ec0e0

Eclipse

http://gyazo.com/6a4ba95d8e00c59eae210573099702d3.png

Android Studio

https://gyazo.com/cac06a00d11be00f3eaa1c5e27b523f9

GUIの欠点

資源が必要

作るのが大変

テストが大変

グラフィクスが大変

GUIの欠点

並列プログラミング

自動実行をやりにくい

正確な値を指定しにくい

GUIの拡張

3次元GUI

ズーミングGUI (ZUI)

3次元GUI

多くの情報を表示可能

格好良いインタフェース

3次元デスクトップ提案など

しかし全く普及せず

3次元GUIの問題点

3次元空間の把握は難しい

3次元空間の移動/操作は難しい

計算機操作だけのために3次元操作は無理

ズーミングGUI (ZUI)

無限のデータを扱える

一時研究の流行になった

Google Maps

https://i.gyazo.com/8e8750829e607243f9117e4526933aac.gif

ZUIの問題点

迷いやすい

難しい

Pad

ズーミングインタフェースの先駆

平面を無限に連続的に拡大/縮小

巨大な階層をなめらかにブラウジング

http://gyazo.com/ac6d1d466a3a68d8ddc62ac7849d6f05.png

ビデオ: Pad

http://masui.org.s3.amazonaws.com/8/e/8e9977379b84135c2a50440181883b9a.mp4

Pad++

Padの拡張

フィルタ機能 / Overview+Detail / etc.

ツールキット化

Jazz, Piccolo

http://gyazo.com/32e11ad6ab6a556209c51a7951c3a1cf.png

ビデオ: Pad++

https://www.youtube.com/watch?v=62KcJ09k7cE

https://www.youtube.com/watch?v=68lP1gRLmZw

PhotoMesa

http://gyazo.com/50a5642ea8660dda77f0c6e1a6b6d49a.png

ビデオ: PhotoMesa

https://www.youtube.com/watch?v=aufaFlwQYYU

https://gyazo.com/e62206002273ff91f69559d0e18931d7 https://codesandbox.io/s/m4onl7915y?fontsize=14

計算機の進化

計算機やプログラミングの進化

30年進化してない?

小さく/速く/安くはなったが

全然違うものも考えるべきでは?

古い知恵も役にたつかも?

生物進化の系統樹

http://gyazo.com/a1063ca65e4f24d057832b8d81a6dc96.png

カンブリア爆発

様々な生物「門」が一気に発生

http://gyazo.com/2098757f3e17f02a03a9a20383cf3eb1.png

カンブリア爆発

http://gyazo.com/ed28680d22f568488dd85ee8f3dec405.png

機械の進化

多数の絶滅を経由して現在に到る

http://gyazo.com/8f0b5028e45a9055e0b84220ab91ffc4.png

Lisa

1983 @ Apple

AppleのGUIパソコン

http://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png

まとめ

CLI⇒GUIの変化は重大

連続的/可逆的操作

その後大きな進展が無い

スマホやタブレットは普通のGUI

頭も体も動かさない方向

装置も面倒も減る

新しいイディオムが欲しい